<template>
    <div class="bak">
        <van-form @submit="onSubmit">
        <router-link to="/my">
        <div class="cross-box">
            <van-icon name="cross" size="30" color="#000000"/>
        </div>
        </router-link>
        <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名'},{pattern:/,mes^[\u4E00-\u9FA5A-Za-z0-9]{4,8}$/,sage:'用户名只能为4~6位之间的中文、英文、数字'}]"
        />
        <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' },{pattern:/^[A-Za-z0-9]{6,12}$/,message:'密码只能为6~12位之间的英文、数字'}]"
        />
        <van-field
            v-model="password2"
            name="validator"
            label="重复密码"
            placeholder="请再次填写密码"
            :rules="[{ validator, message: '您再次填写的密码不正确' }]"
         />
        <van-field
            v-model="tel"
            type="tel"
            name="手机号"
            label="手机号 +86"
            placeholder="请填写手机号"
            :rules="[{ required: true, message: '请填写手机号' },{pattern:/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,message:'请输入正确的手机号码格式'}]"
        />
        <van-field
            v-model="sms"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
            :rules="[{ required: true, message: '请填写手机号' },{pattern:/^[A-Za-z0-9]{4,6}$/,message:'请输入正确的验证码'}]"
        >
            <template #button>
                <van-button size="small" type="primary" native-type="button">发送验证码</van-button>
            </template>
        </van-field>
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">
                同意协议并注册
            </van-button>
            <van-popup v-model="show" round>注册成功！</van-popup>
        </div>
        <div class="agreement">
            <span class="agreement1">已阅读并同意以下协议：</span>
            <span class="agreement2">淘宝平台服务协议、隐私权政策、法律声明、支付宝及客户端服务协议</span>
        </div>
    </van-form>
    </div>   
</template>

<script>
    export default {
        name: "Reg",
        data() {
            return {
                pattern: '',
                username: '',
                password: '',
                password2: '',
                tel: '',
                sms: '',
                show: false
            };
        },
        methods: {
            // 点击注册，判断后将用户名传入本地储存
            onSubmit(values) {
                // console.log('submit', values);
                let dataStr = JSON.stringify(values)
                localStorage.setItem('user',dataStr)
                this.show=true;
                this.$router.push({
                    name: 'My'
                })
            },
            // 判断重复密码是否和密码一致
            validator() {
                return this.password == this.password2
            }
        }
};
</script>

<style scoped>
    .bak {
        background-color: #ffffff;
    }
    .van-button--info {
        color: #fff;
        background: linear-gradient(90deg,#F5962E,#F57C2E,#F56E2E,#F55D2E);
        border: 1px solid #fff;
    }
    .cross-box {
        height: 50px;
    }
    .cross-box {
        margin: 10px;
    }
    .van-cell {
        margin: 10px 0;
    }
    .agreement {
        margin: 0 20px;
    }
    .agreement1 {
        font-size: 14px;
        color: #999999;
    }
    .agreement2 {
        font-size: 14px;
        color: #F55D2E;
    }
    .van-popup--center.van-popup--round {
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
</style>